<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图片放大特效</title>
    <style>
      body
      {
        background-color: #F3EFE0;
      }
      .bot
      {
        color: #918E84;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 24px;
        position: relative;
        top: 200px;
        right: 250px;
        float: right;
      }
      .box{width:350px;height:350px;border:1px solid #ccc;position:relative}
      .big{width:400px;height:400px;position:absolute;top:0;left:360px;border:1px solid #ccc;overflow:hidden;display:none}
      .mask{width:175px;height:175px;background:rgba(255,255,0,.4);position:absolute;top:0;left:0;cursor:move;display:none}
      .small{position:relative}
      .box img{vertical-align:top}
      #bigBox img{position:absolute}
    </style>
  </head>
  <body>
    <div class="box" id="box">
      <div id="smallBox" class="small">
        <img src="images/small.jpg">
        <div id="mask" class="mask"></div>
      </div>
      <div id="bigBox" class="big">
        <img id="bigImg" src="images/big.jpg">
      </div>
    </div>
    <script>
     
      function $(id) {    
         return document.getElementById(id);
      }
      
     $('smallBox').onmouseover = function() {
        $('mask').style.display = 'block';
        $('bigBox').style.display = 'block';
     };
   
     $('smallBox').onmouseout = function() {
     
       $('mask').style.display = 'none';
       $('bigBox').style.display = 'none';
     };
     $('smallBox').onmousemove = function(event) {
       var event = event || window.event;

       var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
       var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
       var boxX = pageX - $('box').offsetLeft;
       var boxY = pageY - $('box').offsetTop;
       var maskX = boxX - $('mask').offsetWidth / 2;
       var maskY = boxY - $('mask').offsetHeight / 2;
       if (maskX < 0) {
         maskX = 0;
       }
       if (maskX > $('smallBox').offsetWidth - $('mask').offsetWidth) {
         maskX = $('smallBox').offsetWidth - $('mask').offsetWidth;
       }
       if (maskY < 0) {
         maskY = 0;
       }
       if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {
         maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;
       }
       $('mask').style.left = maskX + 'px';
       $('mask').style.top = maskY + 'px';
       var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;
       var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;
       var rate = bigImgToMove / maskToMove;
       $('bigImg').style.left = - rate * maskX + 'px';
       $('bigImg').style.top = - rate * maskY + 'px';
     };
    </script>
    <div class="bot">
      <input type="button" value="返回" onclick="location.href = '../章节目录/第八章.html'">
      <br><br>
      <h3>Please appreciate((●'◡'●))......</h3>
    </div>
  </body>
</html>